<template>
  <div class="weui-tab">
    <div class="weui-tab__panel">
      <div class="flex-auto list-item" v-for="(item,index) in rowlist" :key="index">
        <div>
          <div class="title">{{item.researchName}}</div>
          <div class="flex-left mt12">
            <!-- <img class="position" src="../../common/static/imgs/position.png" />
            <div class="sm-title">北京</div>-->
            <img class="house" src="../../common/static/imgs/house.png" />
            <div class="sm-title ">{{item.researchPlace}}</div>
          </div>
        </div>

        <!-- /** 审核状态（ 0=-待审核，1-审核通过，2-已退回 */ -->
        <div class="see flex-center" v-if="item.checkStatus==2" @click="onGodeil(item.id)">
          已退回
          <div class="right-bg">
            <img class="right" src="../../common/static/imgs/right-logo.png" />
          </div>
        </div>
        <div class="see-green flex-center" v-else-if="item.checkStatus==1"   @click="onGodeil(item.id,'see')"  >
          已通过
          <div class="right-bg">
            <img class="right" src="../../common/static/imgs/green.png" />
          </div>
        </div>
        <div class="see flex-center" v-else @click="onGodeil(item.id)">
          待审核
          <div class="right-bg">
            <img class="right" src="../../common/static/imgs/right-logo.png" />
          </div>
        </div>
      </div>
      <div class="weui-cells__title"></div>
      <div id="refresh-body">
        <div class="more" v-if="hasMore" @click="loadMore">——————点击加载更多——————</div>
        <div class="more" v-else>——————暂无更多数据——————</div>
      </div>
    </div>

    <!-- <div id="refresh-body">
      <div style="text-align: center; font-size: 14px;">下拉加载数据</div>
    </div>-->
    <div class="weui-tabbar">
      <a href="javascript:;" @click="viewHome" class="weui-tabbar__item weui-bar__item">
        <span style="display: inline-block; position:relative;bottom:0">
          <!-- <i class="icon-tab icon-tab-messageCurrent"></i> -->
          <img class="icon-tab-messageCurrent" src="../../common/static/imgs/home.png" />
        </span>
        <p class="weui-tabbar__label">首页</p>
      </a>
      <a href="javascript:;" @click="viewAdd" class="weui-tabbar__item">
        <!-- <i class="icon-tab icon-tab-email"></i> -->
        <img class="icon-tab-messageCurrent" src="../../common/static/imgs/add.png" />
        <p class="weui-tabbar__label">新增</p>
      </a>
      <a href="javascript:;" class="weui-tabbar__item">
        <span style="display: inline-block; position:relative;">
          <img class="icon-tab-messageCurrent" src="../../common/static/imgs/meactive.png" />
        </span>
        <p class="weui-tabbar__label">我的</p>
      </a>
    </div>
  </div>
</template>
<script>
import { getlistMe } from '../../config/api/api';
export default {
  data() {
    return {
      rowlist: [],
      userId: '',
      total: 0,
      pageNum: 1,
      pageSize: 10, // 当前页码
      loading: false,
      hasMore: true,
      isLoading: false
    };
  },
  created() {
    window.HWH5.setNavigationBarTitle({ title: '我的列表' });
    HWH5.getStorage('userInfo').then(data => {
      this.userId = data.userId;
      this.feachlist();
    });
  },
  mounted() {
    // new Mdate("dateSelectorOne");
    let _this = this;
    let mask = document.getElementsByClassName('weui-mask')[0];
    let picker = document.getElementsByClassName('weui-picker')[0];
    if (mask && picker) {
      var btn = document.getElementsByClassName('weui-picker__action')[0];
      var e = document.createEvent('MouseEvents');
      e.initEvent('click', true, true);
      console.log(btn.dispatchEvent(e));
      btn.dispatchEvent(e);
    }
  },

  methods: {
    getTotalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
    onGodeil(id,keyword) {
      this.$router.push({ path: '/add', query: { keyword: keyword?keyword:'edit', id } });
    },
    feachlist() {
      if (!this.hasMore) return;
      let data = {
        isApp: 1,
        userId: this.userId || this.$store.state.home.userInfo.userId,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      HWH5.showLoading();
      getlistMe(data)
        .then(res => {
          // 如果是第一页则替换数据，否则追加数据
          if (this.pageNum === 1) {
            this.rowlist = res.rows;
          } else {
            this.rowlist = [...this.rowlist, ...res.rows];
          }

          this.total = res.total;
          HWH5.hideLoading();

          // 更新是否有更多数据
          this.hasMore = this.pageNum < this.getTotalPages();

          // console.log(`加载第${this.pageNum}页数据:`, res.rows);
          // console.log('当前数据:', this.rowlist);
          // console.log('是否还有更多数据:', this.hasMore);
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 加载更多数据
    loadMore() {
      if (this.hasMore) {
        this.pageNum++;
        this.feachlist();
      } else {
        console.log('没有更多数据了');
      }
    },
    viewHome() {
      this.$router.push('/home');
    },
    viewAdd() {
      this.$router.push('/add');
    }
  }
};
</script>  
<style lang="less" scoped>
.weui-tab {
  height: 100vh;
}
.weui-tabbar__item{
  height: 55px;
}
.icon-tab-messageCurrent {
  width: 21px;
  height: 24px;
}
.more {
  color: #666666;
  font-size: 12px;
  text-align: center;
}
.weui-tabbar__label {
  color: #3d3d3d;
}
.weui-tab__panel {
  height: 100vh;
  background: #f4f8f9;
  padding: 16px;
  padding-top: 0px;
  padding-bottom: 100px;

  .list-box {
    width: 100%;
    .title {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: 800;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .icon {
      width: 4px;
      height: 14px;
      margin-right: 5px;
    }
    .more-text {
      font-family: Source Han Sans;
      font-size: 12px;
      font-weight: normal;
      line-height: normal;
      text-align: right;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #999999;
    }
    .more {
      width: 8px;
      height: 8px;
      margin-left: 5px;
    }
  }
  .list-item {
    background-color: #fff;
    padding: 12px;
    border-radius: 4px;
    margin-top: 16px;
    .position {
      height: 10px;
      width: 9px;
      margin-right: 5px;
    }
    .house {
      width: 10px;
      height: 9px;
      margin-right: 5px;
      // margin-left: 10px;
    }
  .title {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 700;
      width: 200px;
      line-height: normal;
      letter-spacing: 0em;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .sm-title {
      font-family: Source Han Sans;
      font-size: 11px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      width: 200px;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #999999;
    }
    .see {
      width: 80px;
      height: 32px;
      font-size: 14px;
      border-radius: 8px;
      background: #f2f1ff;
      color: #5456e5;
      height: 32px;
      text-align: center;
      .right-bg {
        width: 12px;
        height: 24px;
        border-radius: 2px;
        background: rgba(214, 218, 226, 0.3);
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
      .right {
        width: 6px;
        height: 12px;
        margin: auto;
      }
    }
    .see-green {
      min-width:80px; 
      width: 80px;
      height: 32px;
      font-size: 14px;
      border-radius: 8px;
      background: #e1ffdc;
      color: #1aaa00;
      height: 32px;
      text-align: center;
      .right-bg {
        width: 12px;
        height: 24px;
        border-radius: 2px;
        background: rgba(193, 231, 186, 0.3);
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
      .right {
        width: 6px;
        height: 12px;
        margin: auto;
      }
    }

    .see-red {
      width: 80px;
      height: 32px;
      font-size: 14px;
      border-radius: 8px;
      background: #ffe8e8;
      color: #ff3636;
      height: 32px;
      text-align: center;
      .right-bg {
        width: 12px;
        height: 24px;
        border-radius: 2px;
        background: rgba(255, 54, 54, 0.1);
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
      .right {
        width: 6px;
        height: 12px;
        margin: auto;
      }
    }
  }
}
.introduce {
  .title {
    box-sizing: border-box;
    background: #fff;
    padding: 12px 16px 0 16px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
  }
  .campusDesc {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
  }
}
</style>